<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .table {
      background-color: lightsteelblue;
      margin: 0px auto;
    }
  </style>
</head>

<body>
  <!--有问题-->
  <div id="app">
    <table border="1" class="table">
      <thead>
        <tr>
          <th colspan="5">购物车</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" v-model="checked" @change="changeAllChecked()">全选
          </td>
          <td>商品名称</td>
          <td>商品单价</td>
          <td>商品数量</td>
          <td>操作</td>
        </tr>
        <tr v-for="(phone,index) in list">
          <td>
            <input type="checkbox" :value="phone.name" v-model="checkList">
          </td>
          <td>{{phone.name}}</td>
          <td>{{phone.price}}</td>
          <td>
            <input type="text" v-model.number="phone.num">
          </td>
          <td>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
        <tr>
          <td>总计</td>
          <td></td>
          <td>{{Price}}元</td>
          <td>{{Num}}件</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          list: [
            {
              name: 'iphone 12',
              price: 6000,
              num: 2
            },
            {
              name: 'huawei P40 pro',
              price: 5000,
              num: 5
            },
            {
              name: 'mi 11',
              price: 4000,
              num: 8
            }
          ],
          checked: false,
          checkList: [],
          checkedArr: ['iphone 12', 'huawei P40 pro', 'mi 11'],
          isCheckAll: false
        }
      },
      //计算属性
      computed: {
        //总价格
        Price() {
          let num = 0;
          this.list.forEach(item => {
            num += item.price * item.num;
          });
          return num.toFixed(2);
        },
        //总数量
        Num() {
          let num1 = 0;
          this.list.forEach(item => {
            num1 += item.num;
          });
          return num1;
        }
      },
      methods: {
        //删除购物车的某一项
        del(index) {
          this.list.splice(index, 1);
        },
        //添加购物车
        /*add(index) {

        }*/
        changeAllChecked: function () {
          if (this.checked) {
            this.checkList = this.checkedArr
          } else {
            this.checkList = []
          }
        }
      },
      watch: {
        "checkedNames": function () {
          if (this.checkList.length == this.checkedArr.length) {
            this.checked = true
          } else {
            this.checked = false
          }
        }
      }
    });
  </script>
</body>

</html>